<template>
      <n-flex style="padding-bottom: 5px;" >
        <ItemCard
        v-for="(item,_i) in notFolderNodes"
        :node = "item"
        @upTextLabel="upTextLabel"
        />
      </n-flex>

      <n-timeline>
        <n-timeline-item v-for="item in folderNodes" :content="item.label" type="success">
          <template #header>
            <n-flex >
              {{ item.label }}
              <n-popover trigger="hover" placement="right-start">
                <template #trigger>
                  <n-button text style="top: 0px;" @click.stop="newMomento(item)">
                      <n-icon :size="18">
                        <Add />
                      </n-icon>
                  </n-button>
                </template>
                <span>新增记录</span>
              </n-popover>
            </n-flex>
          </template>
          <template #default>
            
              <div style="margin-left: 20px;">
                <Content :key="item.key" :nodes="item.children" />
              </div>
          </template>
        
          
        </n-timeline-item>
      </n-timeline>

</template>


<script setup lang="ts">
import { ref, watch } from 'vue'
import Content from './Index.vue'
import ItemCard from './ItemCard.vue'
import {
  Add
} from '@vicons/ionicons5'
import { invoke } from '@tauri-apps/api/core'

interface TreeNodeData {
  key: string | number
  parentKey: string | number
  groupId: string | number
  type: string
  label: string
  heading?: string
  content?: string
  isFolder: number
  children: TreeNodeData[]
}

const props = defineProps<{
  nodes: TreeNodeData[]
}>()
const emit = defineEmits<{
    newText: [node: any, key: string|number]
    upTextLabel: [key: string|number, lable: string]
  }>()
const localNodes = ref<TreeNodeData[]>(props.nodes)
const folderNodes = ref<TreeNodeData[]>([])
const notFolderNodes = ref<TreeNodeData[]>([])

// 同步外部变化
watch(
  () => props.nodes,
  (v) => {
    refreshNodes(v)
  },
  { deep: true, immediate: true }
)

function refreshNodes(v: TreeNodeData[] = []) {
  const normalized = (v ?? []).map(n => ({
    ...n,
    children: n.children ?? []
  }))
  localNodes.value = normalized
  folderNodes.value = normalized.filter(n => n.isFolder === 1)
  notFolderNodes.value = normalized.filter(n => n.isFolder !== 1)
}

function upTextLabel(key: string|number, lable: string) {
  emit("upTextLabel", key, lable)
}

async function newMomento(node: TreeNodeData) {
  console.log(node.label)
  let data:any = await invoke("add_momento", { 
    pid: node.key, 
    bookId: node.groupId, 
    noteContent: "", 
    title: "新建笔记", 
    heading: "", 
    isFolder: 0 });
  
  if (data.is_success) {
    let textNode = {
      key: data.data.toString(),
      children: [],
      parentKey: node.key,
      groupId: node.groupId,
      type: "momento",
      label: "新建笔记",
      isFolder: 0,
    };
    console.log("44添加text");
    emit("newText", textNode, node.key)
    node.children.splice(0, 0, textNode)
  }
}

</script>